<template>
  <div class="main">
    <el-row type="flex" justify="space-around" :gutter="10">
      <!-- 查看3D视图 -->
      <el-col :span="8">
        <el-card
          class="box-card flex-center"
          shadow="hover"
          style="height: 180px"
        >
          <el-button
            size="big"
            type="primary"
            style="
              width: 220px;
              height: 66px;
              font-size: 1.36rem;
              margin-left: 10px;
            "
            @click="downloadPdb"
            >下载示例PDB文件</el-button
          >
          <div class="el-upload__tip">
            先在下方输入PDB文件名，然后点击下载按钮
          </div>
          <div>
            <el-input
              v-model="downLoadPdbName"
              placeholder="PDB文件名称(4位) eg：1a8m"
              class="downloadPdb"
            >
            </el-input>
          </div>
        </el-card>
      </el-col>
      <!-- 文件上传 -->
      <el-col :span="8">
        <el-card
          class="box-card flex-center"
          shadow="hover"
          style="height: 180px"
        >
          <el-upload
            class="upload-demo"
            style="text-align: center"
            ref="upload"
            action="https://www.violetsnow.link/panda/info/upload"
            :on-success="successupload"
            :on-change="handlechange"
            :before-upload="progressFunc"
            :file-list="fileList"
            :auto-upload="true"
            :multiple="false"
          >
            <el-button
              slot="trigger"
              size="big"
              type="primary"
              drag
              style="width: 220px; height: 66px; font-size: 1.36rem"
              >上传PDB文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传.pdb格式文件;每次仅限上传一个文件，且会覆盖之前的文件
            </div>
          </el-upload>
        </el-card>
      </el-col>
      <!-- 查看3D视图 -->
      <el-col :span="8">
        <el-card
          class="box-card flex-center"
          shadow="hover"
          style="height: 180px"
        >
          <el-button
            size="big"
            type="primary"
            style="
              width: 220px;
              height: 66px;
              font-size: 1.36rem;
              margin-left: 10%;
            "
            @click="check3DViewer"
            >查看3D视图</el-button
          >
          <div class="el-upload__tip">
            根据PDB文件大小不同，网页加载速度可能会有差异~
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin: 10px 0px">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix headers">
          <span>MoleType</span>
        </div>
        <div
          class="grid-content bg-purple-dark data-content"
          id="header-content"
        >
          {{ moletype }}
        </div>
      </el-card>
    </el-row>
    <el-row style="margin: 10px 0px">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix headers">
          <span id="headers">Sequence</span>
        </div>
        <div
          class="grid-content bg-purple-dark data-content"
          id="header-content"
        >
          {{ sequence }}
        </div>
      </el-card>
    </el-row>

    <!-- ATOM表格部分 -->
    <div style="text-align: center">
      <h1
        @click="showDialogView(AtomTable)"
        style="cursor: pointer"
        title="点击下载"
      >
        ATOM表格
      </h1>
      <div
        class="tables"
        @click="showDialogView(AtomTable)"
        title="点击下载"
        style="cursor: pointer"
      >
        <el-table
          :data="AtomTable"
          size="medium"
          stripe
          border
          height="450"
          v-loading="loadingA"
          element-loading-text="拼命加载中~"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%"
        >
          <el-table-column prop="category" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="num" label="原子序号" align="center">
          </el-table-column>
          <el-table-column prop="atom_name" label="原子名称" align="center">
          </el-table-column>
          <el-table-column prop="residues" label="残基名称" align="center">
          </el-table-column>
          <el-table-column
            prop="chain_identifier"
            label="链标识符"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="residues_num"
            label="残基序列号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="atom_lcation"
            label="原子坐标(x,y,z)"
            align="center"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="occupation_rate" label="占有率" align="center">
          </el-table-column>
          <el-table-column prop="temperature" label="温度因子" align="center">
          </el-table-column>
          <el-table-column
            prop="element_symbol"
            label="元素符号"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页功能 -->
      <el-pagination
        @size-change="atomhandleSizeChange"
        @current-change="atomhandleCurrentChange"
        :current-page="atomqueryInfo.pageNum"
        :page-sizes="[50, 100, 200, 400]"
        :page-size="50"
        layout="total, sizes, prev, pager, next, jumper"
        :total="atomPagecount"
      >
      </el-pagination>
    </div>
    <!-- HETATM表格部分 -->
    <div style="text-align: center">
      <h1
        @click="showDialogView(hetatmTable)"
        style="cursor: pointer"
        title="点击下载"
      >
        HETATM表格
      </h1>
      <div
        class="tables"
        @click="showDialogView(hetatmTable)"
        title="点击下载"
        style="cursor: pointer"
      >
        <el-table
          :data="hetatmTable"
          height="450"
          size="medium"
          stripe
          border
          v-loading="loadingB"
          element-loading-text="拼命加载中~"
          element-loading-background="rgba(255, 255, 255, 1)"
        >
          <el-table-column fixed prop="category" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="num" label="原子序号" align="center">
          </el-table-column>
          <el-table-column prop="atom_name" label="原子名称" align="center">
          </el-table-column>
          <el-table-column prop="residues" label="残基名称" align="center">
          </el-table-column>
          <el-table-column
            prop="chain_identifier"
            label="链标识符"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="residues_num"
            label="残基序列号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="atom_lcation"
            label="原子坐标(x,y,z)"
            align="center"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="occupation_rate" label="占有率" align="center">
          </el-table-column>
          <el-table-column prop="temperature" label="温度因子" align="center">
          </el-table-column>
          <el-table-column
            prop="element_symbol"
            label="元素符号"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页功能 -->
      <el-pagination
        @size-change="hetatmhandleSizeChange"
        @current-change="hetatmhandleCurrentChange"
        :current-page="hetatmqueryInfo.pageNum"
        :page-sizes="[50, 100, 200, 400]"
        :page-size="50"
        layout="total, sizes, prev, pager, next, jumper"
        :total="hetatmPagecount"
      >
      </el-pagination>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="footer_con">Copyright 2022</div>
      <div class="footer_con">
        《基于结构相似性的无监督药物-靶点相互作用预测》
      </div>
    </div>
    <!-- 下载会话框 -->
    <el-dialog
      title="信息展示和下载界面"
      class="show_data"
      :visible.sync="showDialog"
      center
      top="10vh"
      width="1000px"
    >
      <div>
        <p style="display: inline-block">请选择您要下载的序列:</p>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-checkbox :label="0">原子序号</el-checkbox>
          <el-checkbox :label="1">原子名称</el-checkbox>
          <el-checkbox :label="2">残基名称</el-checkbox>
          <el-checkbox :label="3">链标识符</el-checkbox>
          <el-checkbox :label="4">残疾序列号</el-checkbox>
          <el-checkbox :label="5">原子坐标</el-checkbox>
          <el-checkbox :label="6">占有率</el-checkbox>
          <el-checkbox :label="7">温度因子</el-checkbox>
          <el-checkbox :label="8">元素符号</el-checkbox>
        </el-checkbox-group>
      </div>
      <el-table :data="dialogData" height="450">
        <el-table-column fixed prop="category" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="num" label="原子序号" align="center">
        </el-table-column>
        <el-table-column prop="atom_name" label="原子名称" align="center">
        </el-table-column>
        <el-table-column prop="residues" label="残基名称" align="center">
        </el-table-column>
        <el-table-column
          prop="chain_identifier"
          label="链标识符"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="residues_num" label="残基序列号" align="center">
        </el-table-column>
        <el-table-column
          prop="atom_lcation"
          label="原子坐标(x,y,z)"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="occupation_rate" label="占有率" align="center">
        </el-table-column>
        <el-table-column prop="temperature" label="温度因子" align="center">
        </el-table-column>
        <el-table-column prop="element_symbol" label="元素符号" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false" style="margin-right: 50px"
          >取 消</el-button
        >
        <el-button type="primary" @click="downloadFile">下 载</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMoleAndSequence,
  getAtomTable,
  getHetatmTable,
  exportAtomFile,
  exportHetatmFile,
} from "../api/api.js";
export default {
  data() {
    return {
      moletype: "暂无数据",
      sequence: "暂无数据",
      //上传文件列表
      fileList: [],
      AtomTable: [], //ATOM表格数据（分页）
      hetatmTable: [], //HETATM表格数据
      dialogData: [],
      loadingA: false,
      loadingB: false,
      //分页功能：
      //currentPage: 1,
      atomPagecount: 0, //总条目数
      atomqueryInfo: {
        pageNum: 1,
        pageSize: 50,
      },
      hetatmPagecount: 0,
      hetatmqueryInfo: {
        pageNum: 1,
        pageSize: 50,
      },
      showDialog: false, //是否展示下载框
      checkList: [], //选中的值
      downloadType: 0, //下载类型
      pdbName: "",
      downLoadPdbName: "",
    };
  },
  methods: {
    //初始化查询参数
    initQueryInfo() {
      this.atomPagecount = 0;
      this.atomqueryInfo = {
        pageNum: 1,
        pageSize: 50,
      };
      this.hetatmPagecount = 0;
      this.hetatmqueryInfo = {
        pageNum: 1,
        pageSize: 50,
      };
    },
    //文件上传成功的钩子
    successupload(res, file) {
      let a = file.name + "";
      this.pdbName = a.substring(0, a.indexOf("."));
      console.log("file", this.pdbName);
      if (res.code == 20000) {
        console.log("123123123");
        this.$message({
          message: "文件成功上传至服务器！",
          type: "success",
          center: true,
          showClose: true,
        });
        // this.$notify({
        //   title: "成功",
        //   message: "文件成功上传至服务器！",
        //   type: "success",
        // });
      }
      //console.log("upload", res);
      //重新上传文件之后先初始化数据
      this.initQueryInfo();
      this.getMoleAndSequence();
      this.getAtomTable(this.atomqueryInfo);
      this.getHetatmTable(this.hetatmqueryInfo);
      this.$loading.close;
      // loading.close();
    },
    //
    progressFunc(file) {
      console.log("file", file);
      const loading = this.$loading({
        lock: true,
        text: "正在上传PDB文件~",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handlechange(file, fileList) {
      // console.log("file2", file);
      this.fileList = fileList.slice(-1); //截取数组最后一个元素
    },

    //根据上传到服务器的pdb文件获取moletype和sequence
    async getMoleAndSequence() {
      let { data: res } = await getMoleAndSequence();
      this.moletype = res.moleType;
      this.sequence = res.sequence;
    },
    //获取ATOM表格（分页）
    async getAtomTable(info) {
      this.AtomTable = []; //清空原有数据
      let res = await getAtomTable(info);
      // console.log("res.atom", res.atom);
      this.atomPagecount = res.data.count; //总数据条数
      for (let i = 0; i < res.data.atom.length; i++) {
        this.AtomTable.push(eval("(" + res.data.atom[i] + ")"));
      }
      if (res.code == 20000) {
        // this.$message({
        //   message: "获取ATOM数据成功！",
        //   type: "success",
        //   center: true,
        // });
        // this.$notify.success({
        //   title: "成功",
        //   message: "获取ATOM数据成功！",
        // });
      } else {
        this.$message({
          message: "获取ATOM数据失败，请检查网络连接！！",
          type: "error",
          center: true,
          showClose: true,
        });
        // this.$notify.error({
        //   title: "失败",
        //   message: "获取ATOM数据失败，请检查网络连接！",
        // });
      }
      this.loadingA = false; //请求结束，取消表格加载效果
      console.log("this.AtomTable", this.AtomTable);
    },
    //获取HETATM表格（分页）
    async getHetatmTable(info) {
      this.hetatmTable = [];
      let res = await getHetatmTable(info);
      this.hetatmPagecount = res.data.count;
      for (let i = 0; i < res.data.atom.length; i++) {
        this.hetatmTable.push(eval("(" + res.data.atom[i] + ")"));
      }
      if (res.code == 20000) {
        // this.$message({
        //   message: "获取HETATM数据成功！",
        //   type: "success",
        //   center: true,
        // });
        // this.$notify.success({
        //   title: "成功",
        //   message: "获取HETATM数据成功！",
        // });
      } else {
        this.$message({
          message: "获取HETATM数据失败，请检查网络连接！",
          type: "error",
          center: true,
          showClose: true,
        });
        // this.$notify.error({
        //   title: "失败",
        //   message: "获取HETATM数据失败，请检查网络连接！",
        // });
      }
      this.loadingB = false; //请求结束，取消表格加载效果
      console.log("this.hetatmTable", this.hetatmTable);
    },

    //分页功能的函数
    // pageSize 改变时触发的函数
    atomhandleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.atomqueryInfo.pageSize = val;
      this.loadingA = true; //请求开始，开启表格加载效果
      this.getAtomTable(this.atomqueryInfo);
    },
    //currentPage 改变时会触发
    atomhandleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.atomqueryInfo.pageNum = val;
      this.loadingA = true; //请求开始，开启表格加载效果
      this.getAtomTable(this.atomqueryInfo);
    },
    hetatmhandleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.hetatmqueryInfo.pageSize = val;
      this.loadingB = true; //请求开始，开启表格加载效果
      this.getHetatmTable(this.hetatmqueryInfo);
    },
    //currentPage 改变时会触发
    hetatmhandleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.hetatmqueryInfo.pageNum = val;
      this.loadingB = true; //请求开始，开启表格加载效果
      this.getHetatmTable(this.hetatmqueryInfo);
    },

    //点击展示下载对话框
    showDialogView(info) {
      if (this.pdbName == "") {
        this.$message({
          message: "未检测到PDB文件，请先上传PDB文件！",
          type: "warning",
          center: true,
          showClose: true,
        });
        // this.$notify.error({
        //   title: "操作失败",
        //   message: "您还未上传PDB文件",
        // });
        return;
      }
      this.showDialog = true;
      this.dialogData = info;
      console.log("展示下载对话框");
      if (info == this.AtomTable) this.downloadType = 1;
      else if (info == this.hetatmTable) this.downloadType = 2;

      console.log("downloadType", this.downloadType);
    },
    //下载文件
    async downloadFile() {
      console.log("下载文件");
      let str = "";
      this.checkList.sort(); //将数组重新进行排序（保证按照012345678的顺序）
      for (let i = 0; i < this.checkList.length; i++) {
        str += this.checkList[i];
      }
      if (this.downloadType == 1) {
        let res = await exportAtomFile(str);
        let filename = "ATOM.xls";
        this.download(res, filename);
      } else if (this.downloadType == 2) {
        let res = await exportHetatmFile(str);
        let filename = "HETATM.xls";
        this.download(res, filename);
      }
    },
    //实现下载的函数
    download(res, filename) {
      let blob = new Blob([res]);
      let link = document.createElement("a"); //创建超链接标签a
      link.style.display = "none";
      let objectUrl = URL.createObjectURL(blob); //根据blob创建链接
      //设置相关属性
      link.setAttribute("href", objectUrl);
      link.setAttribute("download", filename); //设置下载文件的文件名
      // 触发点击
      document.body.appendChild(link);
      link.click();
      // 然后移除
      document.body.removeChild(link);
    },
    check3DViewer() {
      let baseStr1 = "https://3dmol.csb.pitt.edu/viewer.html?pdb=";
      let baseStr2 =
        "&select=chain:B&style=cartoon;stick:radius~0.1&select=chain:A&surface=opacity:0.8;colorscheme:whiteCarbon&select=chain:B&style=cartoon;line&select=resi:19,23,26;chain:B&style=cartoon;stick&select=resi:19,23,26;chain:B&labelres=backgroundOpacity:0.8;fontSize:14";
      let url = baseStr1 + this.pdbName + baseStr2;
      if (this.pdbName == "") {
        this.$message({
          message: "未检测到PDB文件，请先上传PDB文件！",
          type: "warning",
          center: true,
          showClose: true,
        });
        // this.$notify.error({
        //   title: "操作失败",
        //   message: "您还未上传PDB文件",
        // });
      } else {
        window.open(url, this.pdbName);
      }
    },
    //下载示例PDB文件
    downloadPdb() {
      if (this.downLoadPdbName == "") {
        this.$message.warning({
          message: "请先在输入框中输入想要下载的PDB文件名",
          center: true,
          showClose: true,
        });
        return;
      }
      let url =
        "https://files.rcsb.org/download/" + this.downLoadPdbName + ".pdb";
      window.open(url);
    },
  },
};
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
}
.main {
  user-select: none;
  margin-top: 60px;
}
.headers {
  font-size: 1.4322rem;
  font-weight: bolder;
  text-align: center;
  color: darkblue;
}
.box-card {
  align-items: center;
}
#header-content {
  text-align: center;
  user-select: text;
  cursor: default;
}
h1 {
  color: darkblue;
}
.box-card:hover {
  border: 1px solid #46bbff;
}
#header-content {
  word-wrap: break-word;
}
.tables {
  width: 80%;
  margin-left: 10%;
}
.data-content {
  color: rgb(140, 140, 140);
  letter-spacing: 0.01rem;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.downloadPdb {
  margin-top: 10px;
}
.footer {
  position: absolute;
  width: 100%;
  margin: 0.0625rem auto;
  text-align: center;
  height: 5rem;
  line-height: 2.5rem;
  background-color: #3f3f3f;
  cursor: default;
}
.footer_con {
  text-align: center;
  color: #f1f8ff;
}
</style>
